<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html>

<head>
    <meta charset="UTF-8">
    <meta name="ctx" th:content="${#httpServletRequest.getContextPath()}"/>
    <title>整体广告</title>
    <link rel="stylesheet" th:href="@{/css/admin/base-v2.css}">
    <link rel="stylesheet" th:href="@{/lib/font-awesome/4.7.0/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/lib/flatpickr/flatpickr.min.css}">
    <link rel="stylesheet" th:href="@{/css/admin/app.css}">
</head>

<body>
    <div class="app-page">
        <div class="app-page-header">
            <div class="page-title">
                <div class="title">广告报表</div>
                <div class="btn-group">
                    <a id="export-program-detail" class="z-btn z-primary">导出</a>
                </div>
            </div>
        </div>
        <div class="app-page-content">
            <div class="app-card z-mab">
                <div class="app-card-body">
                    <!-- 过滤器 -->
                    <form class="filter">
                        <div class="filter-group">
                            <div class="filter-item">
                                <div class="form-item row">
                                    <div class="label">时间</div>
                                    <div class="body">
                                        <select name="timeType">
                                            <option value="1" th:selected="${timeType == 1}">接收时间</option>
                                            <option value="2" th:selected="${timeType == 2}">完成时间</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="filter-item">
                                <div class="form-item row">
                                    <div class="label">发布方式</div>
                                    <div class="body">
                                        <select name="publishWay">
                                            <option value="">请选择</option>
                                            <option value="1" th:selected="${publishWay == 1}">定时发布</option>
                                            <option value="2" th:selected="${publishWay == 2}">预约发布</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="filter-item">
                                <div class="form-item row">
                                    <div class="label">发布ID</div>
                                    <div class="body">
                                        <input type="text" name="programJsonId" onkeyup="this.value=this.value.replace(/\D/g,'')">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="filter-group">
                            <div class="filter-item">
                                <div class="form-item row">
                                    <div class="label">开始时间</div>
                                    <div class="body">
                                        <input type="text" name="startTime" class="flatpickr-datetime">
                                    </div>
                                </div>
                            </div>
                            <div class="filter-item">
                                <div class="form-item row">
                                    <div class="label">结束时间</div>
                                    <div class="body">
                                        <input type="text" name="endTime" class="flatpickr-datetime">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="filter-group">
                            <button class="z-btn z-primary">查询</button>
                        </div>
                    </form>
                </div>
            </div>
            <div class="app-card">
                <div class="app-card-body">
                    <div class="app-list-total z-mab">
                        <span>总计：<i><td th:text="${total}"></td></i></span>
                    </div>

                    <table class="z-table">
                        <thead>
                            <th>发布ID</th>
                            <th>发布方式</th>
                            <th>接收时间</th>
                            <th>完成时间</th>
                            <th>下载终端数</th>
                            <th>成功终端数</th>
                            <th>失败终端数</th>
                        </thead>
                        <tbody>
                            <tr th:each="program: ${programList}">
                                <td th:text="${program.programJsonId}"></td>
                                <td th:text="${program.publishWay}"></td>
                                <td th:text="${program.receiveTime}"></td>
                                <td th:text="${program.doneTime}"></td>
                                <td th:text="${program.deviceNum}"></td>
                                <td th:text="${program.deviceSuccessNum}"></td>
                                <td th:text="${program.deviceFailNum}">待统计</td>
                            </tr>
                        </tbody>
                    </table>
                    <!-- 分页信息 -->
                    <div class="app-card-body">
                        <!-- 前端分页 -->
                        <div class="pagination z-pat z-fr"></div>
                    </div>
                </div>
            </div>
        </div>

        <script th:src="@{/lib/jquery.min.js}"></script>
        <script th:src="@{/lib/layer-v3.1.1/layer/layer.js}"></script>
        <script th:src="@{/js/popup.js}"></script>
        <script th:src="@{/js/form.js}"></script>
        <script th:src="@{/js/admin/app.js}"></script>
        <script th:src="@{/js/pagination.js}"></script>
        <script th:src="@{/lib/flatpickr/flatpickr.js}"></script>
        <script th:src="@{/lib/flatpickr/zh.js}"></script>
        <script type="text/javascript" th:inline="javascript">
            //获取context path
            var context = $("meta[name='ctx']").attr("content");

            // 从URL加载搜索数据
            $(".filter").formLoad(App.query);

            flatpickr.localize(flatpickr.l10ns.zh);
            flatpickr(".flatpickr-datetime", {
                enableTime: true,
                enableSeconds: true,
            });

            //处理分页
            var pageNum =  [[${pageNum}]];
            var pageSize = [[${pageSize}]];
            var total = [[${total}]];
            // 时间查询方式:1:接收时间 2:完成时间
            var timeType = $("select[name='timeType']").val();
            // 开始时间
            var startTime = $("input[name='startTime']").val();
            // 结束时候
            var endTime = $("input[name='endTime']").val();
            // 发布方式
            var publishWay = $("select[name='publishWay']").val();
            // 发布Id
            var programJsonId = $("input[name='programJsonId']").val();

            console.log("timeType: " + timeType + ",startTime: " + startTime + ",endTime: " + endTime + ",publishWay: " + publishWay + ",programJsonId: " + programJsonId);
            var pagination = new Pagination(".pagination", {
                pageIndex: pageNum, // 当前页数
                pageSize: pageSize, // 每页数量
                count: total, // 总条数
                maxButtonCount: 5, // 分页按钮数量(可选)
                // 分页切换事件
                onPageChanged: function(pageIndex) {
                    window.location.href = context + "/report/listWholeProgramReport?pageNum=" + pageIndex + "&pageSize=" + pageSize
                        + "&programJsonId=" + programJsonId + "&timeType=" + timeType
                        + "&startTime=" + startTime + "&endTime=" + endTime + "&publishWay=" + publishWay;
                }
            });

            //导出excel
            $('#export-program-detail').click(function () {
                var url = context + "/export/exportWholeProgramReport";
                var paramStr = createParamStr(pageNum, pageSize);
                if(paramStr !== ""){
                    paramStr = paramStr.substring(1);
                    url = url + "?" + paramStr;
                }
                window.location.href = url;
            });

            /**
             * 创建参数字符串
             * @param pageIndex 当前页
             * @param pageSize 每页条数
             * @returns {string} 参数字符串
             */
            function createParamStr(pageIndex, pageSize) {
                var url = "";
                if(!isBlank(pageIndex)) {
                    url = url + "&pageNum=" + pageIndex;
                }
                if(!isBlank(pageSize)) {
                    url = url + "&pageSize=" + pageSize;
                }
                if(!isBlank(startTime)) {
                    url = url + "&startTime=" + startTime;
                }
                if(!isBlank(endTime)) {
                    url = url + "&endTime=" + endTime;
                }
                if(!isBlank(timeType)) {
                    url = url + "&timeType=" + timeType;
                }
                if(!isBlank(programJsonId)) {
                    url = url + "&programJsonId=" + programJsonId;
                }
                if(!isBlank(publishWay)) {
                    url = url + "&publishWay=" + publishWay;
                }
                return url;
            }

            //检查参数
            function isBlank(param) {
                if(undefined === param){
                    return true;
                }
                if(null == param){
                    return true;
                }
                if("" === param){
                    return true;
                }
                return false;
            }
        </script>
</body>

</html>